<template @click="cencelUpload">
  <div class="card">
    <div class="card-header">
      <button type="button" id="addAdvBtn" class="btn btn-primary" data-toggle="modal"
        data-target="#modal-default">添加广告</button>
      <div class="card-tools">
        <div class="input-group input-group-md">
          <input type="text" class="form-control" id="keyword" placeholder="搜索关键字">
          <div id="searchBtn" class="input-group-append">
            <div class="btn btn-primary">
              <i class="fas fa-search"></i>
            </div>
          </div>
        </div>
      </div>

    </div>
    <div id="advTable">

    </div>
  </div>

  <div class="modal fade show" id="modal-default" style="display: none; padding-right: 17px;" aria-modal="true"
    role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">添加广告</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <!-- 提交广告表单 -->
          <form name="advForm" class="form-horizontal" ref="advForm">
            <div class="card-body">
              <div class="form-group row">
                <label class="col-sm-2 col-form-label" for="advTitle">标题：</label>
                <div class="col-sm-10">
                  <input id="advTitle" name="advTitle" type="text" class="form-control" placeholder="请输入广告标题"
                    v-model="advTitle">
                </div>
              </div>
              <div class="form-group row">
                <label class="col-sm-2 col-form-label" for="advType">类别:</label>
                <div class="col-sm-10">
                  <select name="advType" id="advType" class="form-control" v-model="advType">
                    <option value="1">轮播图广告</option>
                    <option value="2">轮播图底部广告</option>
                    <option value="3">热门回收广告</option>
                    <option value="4">优品精选广告</option>
                  </select>
                </div>
              </div>
              <div class="form-group row">
                <label class="col-sm-2 col-form-label" for="advHref">链接：</label>
                <div class="col-sm-10">
                  <input id="advHref" name="advHref" type="text" class="form-control" placeholder="请输入广告链接"
                    v-model="advHref">
                </div>
              </div>
              <div class="form-group row">
                <label class="col-sm-2 col-form-label" for="advHref">排序：</label>
                <div class="col-sm-10">
                  <input id="advOrder" name="advOrder" type="number" class="form-control" placeholder="请输入广告排序，数字越大越靠前"
                    v-model="advOrder">
                </div>
              </div>


              <div class="form-group row">
                <label class="col-sm-2 col-form-label" for="advPic">图片：</label>
                <div class="col-sm-10 custom-file">
                  <!--                            <input type="file" accept="image/png,image/gif,image/jpeg" multiple class="form-control" name="advPic" id="advPic">-->
                  <input type="file" accept="image/png,image/gif,image/jpeg" class="form-control" name="advPic"
                    id="advPic" @change="choiceImg" ref="upLoadInp">
                </div>
              </div>
              <div>
                <img id="preImg" height="100" ref="previewImg" display="block">
              </div>

            </div>
          </form>
          <div class="modal-footer justify-content-between">
            <button type="button" class="btn btn-default" id="adv-cancel" data-dismiss="modal" @click="cencelUpload"
              ref="resetBtn">取消</button>
            <button type="button" class="btn btn-primary" id="adv-save" @click="UpLoad">添加</button>
          </div>
        </div>
      </div>
      <img alt="" src="http://127.0.0.1:8090/upload/94a2bf103da6b7cb6213e2800.jpg" ref="show">
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>

</template>

<script>
//上传图片请求
import { requestUpLoadImg } from '../../../API/send'
import axios from 'axios'
export default {

  name: 'AdvList',
  data() {
    return {
      advTitle: '',
      advType: '',
      advHref: '',
      advOrder: ''
    }
  },
  methods: {
    //选择图片,下方预览图片
    choiceImg(e) {
      //图片预览功能
      //获取目标渲染dom节点
      const preview = this.$refs.previewImg


      //创建图片读取对象
      let rander = new FileReader()
      //读取url
      rander.readAsDataURL(e.target.files[0])
      //绑定读取结束事件
      rander.onloadend = function (e) {
        //获取目标渲染dom节点
        preview.src = e.target.result
      }
    },

    //点击清空src
    cencelUpload() {

      const advForm = this.$refs.advForm
      advForm.reset()
    },
    //上传图片
    async UpLoad() {
      //提交参数的表单
      const form = this.$refs.advForm
      //表单提交收集
      const formData = new FormData(form)


      //发送上传图片请求
      let result = await requestUpLoadImg(formData)
      if (result.code === 200) {
        alert(result.message)
        this.$refs.reset.click()
      }
      // const show = this.$refs.show
      // show.src = result.data
      //成功之后点击取消关闭小窗口

    }
  },
  mounted() {
    this.$store.dispatch('requestImg')
  },
}
</script>

<style lang="scss" scoped>
</style>